<template>
  <div class="selectChapter" >
    <div class="title"><span>我的空间</span>  <span class="closed" @click="Close()"><img src="static/img/close.png"></span></div>
    <div class="list-area">

      <div  class=" fi-search">
        <el-select
          style="width: 223px; float: left;"
          v-model="value2"
          filterable
          allow-create
          default-first-option
          placeholder="选择分组">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>

      <el-input v-model="input"  style="width: 223px;" class="fl search-inp"   placeholder="输入名称搜索"></el-input><el-button class="fl">搜索</el-button>


        <div class="space-tj fr">
          已用:96.7M/500M
          <div class="step"><div class="process" style="width: 60%;"></div></div>
        </div>
    </div>

      <ul class="file-list">
        <li>
          <div class="pic_area"><img src="static/img/pic.jpg"></div>
          <p><span class="tit">文件231</span> </p>
        </li>
        <li>
          <div class="pic_area"><img src="static/img/pic.jpg"></div>
          <p><span class="tit">文件231</span> </p>
        </li>
        <li>
          <div class="pic_area"><img src="static/img/pic.jpg"></div>
          <p><span class="tit">文件231</span> </p>
        </li>
        <li>
          <div class="pic_area"><img src="static/img/pic.jpg"></div>
          <p><span class="tit">文件231</span> </p>
        </li> <li>
        <div class="pic_area"><img src="static/img/pic.jpg"></div>
        <p><span class="tit">文件231</span> </p>
      </li>
        <li>
          <div class="pic_area"><img src="static/img/pic.jpg"></div>
          <p><span class="tit">文件231</span> </p>
        </li>
        <li>
          <div class="pic_area"><img src="static/img/pic.jpg"></div>
          <p><span class="tit">文件231</span> </p>
        </li>
        <li>
          <div class="pic_area"><img src="static/img/pic.jpg"></div>
          <p><span class="tit">文件231</span> </p>
        </li> <li>
        <div class="pic_area"><img src="static/img/pic.jpg"></div>
        <p><span class="tit">文件231</span> </p>
      </li>
        <li>
          <div class="pic_area"><img src="static/img/pic.jpg"></div>
          <p><span class="tit">文件231</span> </p>
        </li>
        <li>
          <div class="pic_area"><img src="static/img/pic.jpg"></div>
          <p><span class="tit">文件231</span> </p>
        </li>
        <li>
          <div class="pic_area"><img src="static/img/pic.jpg"></div>
          <p><span class="tit">文件231</span> </p>
        </li>
        <li>
          <div class="pic_area"><img src="static/img/pic.jpg"></div>
          <p><span class="tit">文件231</span> </p>
        </li>
        <li>
          <div class="pic_area"><img src="static/img/pic.jpg"></div>
          <p><span class="tit">文件231</span> </p>
        </li>
      </ul>
      <div class="mt10 baseAct"><button class="cancel"  type="info">取消</button> <button  @click="goNext()" class="sure">确定</button> </div>
      <div class="arrow-right"></div>
    </div>
    <div class="arrow-right"></div>
    <div class="group-r"  @click="isGroup = true">分组管理</div>
    <div class="upload-r"  @click="isUpload = true">上传</div>




    <div class="  groupDig" v-if="isGroup == true">
      <div class="title">分组管理<span class="closed"   @click="isGroup = false"><img src="static/img/close.png"></span></div>
      <div class="cont">
        <div class="  new-group"   @click="newGroup = true">新建分组</div>
        <ul class="grouplist">
          <li><a>教材文件1 </a> <span class="edit">修改</span> <span class="del">删除</span></li>
          <li><a>教材文件1 </a>   <span class="edit">修改</span> <span class="del">删除</span></li>
          <li><a>教材文件1 </a>   <span class="edit">修改</span> <span class="del">删除</span></li>
          <li><a>教材文件1 </a>   <span class="edit">修改</span> <span class="del">删除</span></li>
          <li><a>教材文件1 </a>   <span class="edit">修改</span> <span class="del">删除</span></li>
        </ul>
      </div>
      <div class="mt30 mr20 ">  <div class="page-area">
        <span type="button" class="btn-home fl">首页</span>
        <el-pagination
          background
          layout="  prev, pager, next "
          :total="1000">
        </el-pagination>
        <span type="button"   class="btn-last fr">尾页</span>
      </div> </div>
    </div>

    <div class="  uploadDig" v-if="isUpload == true">
      <div class="title">上传<span class="closed"  @click="isUpload = false"><img src="static/img/close.png"></span></div>
      <div class="cont">
        <div class="space-tj ">
          已用: <label>96.7M/500M</label>
          <div class="step"><div class="process" style="width: 60%;"></div></div>
        </div>
        <ul>
          <li class="mt30"><el-select
            style="width: 100%;"
            v-model="value"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select></li>

          <li class="mt30">
            <button  class="upfile"  value=""  >选择文件</button> <label>图片1.png，图片3.png，图片4.png，图片...</label>

          </li>
        </ul>
        <div class="mt30 baseAct width100"><button class="cancel"  type="info">取消</button> <button  @click="goNext()" class="sure">确定</button> </div>
      </div>
    </div>


    <div class="  newGroupDig" v-if="newGroup == true">
      <div class="title">新建分组<span class="closed"   @click="newGroup = false"><img src="static/img/close.png"></span></div>
      <div class="cont">
        <ul class="grouplist">
          <li class="bt">请输入分组名称</li>
          <li><el-input v-model="input"   placeholder="单行输入"></el-input></li>
        </ul>
      </div>
      <div class="mt30 baseAct width100"><button class="cancel"  type="info">取消</button> <button  @click="goNext()" class="sure">确定</button> </div>
    </div>

  </div>
</template>

<script>
import Header from '../../components/header.vue';
export default {
  data() {
    return {
      input:'',
      newGroup:true,
      isGroup:false,
      isUpload:false,
      options2: [{
        value: '六年级一班',
        label: '六年级一班'
      }, {
        value: '六年级2班',
        label: '六年级2班'
      } ],
      value: [],
      value2: []
    };
  },
  created() {
  },
  methods: {
    goNext(){
      this.$router.push("/selectChapter2");
    },
    goGroup(){
      this.data.isGroup = true;
    },
    Close(){
      this.$router.go(-1);
    }

  },
  components:{Header}
};
</script>

<style lang="scss" scoped>
html body{ background: #FFFFFF;}
</style>
